<template>
  <div class="emotion-curve">
    <h3>情绪曲线</h3>
    <div class="curve-container" ref="curveContainer">
      <canvas ref="emotionCanvas"></canvas>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue'

const props = defineProps({
  scenes: {
    type: Array,
    required: true
  }
})

const curveContainer = ref(null)
const emotionCanvas = ref(null)
let canvasCtx = null

const initEmotionCurve = () => {
  const canvas = emotionCanvas.value
  const container = curveContainer.value
  
  canvas.width = container.clientWidth
  canvas.height = container.clientHeight
  
  canvasCtx = canvas.getContext('2d')
  drawEmotionCurve()
}

const drawEmotionCurve = () => {
  if (!canvasCtx) return
  
  const canvas = emotionCanvas.value
  const width = canvas.width
  const height = canvas.height
  
  // 清空画布
  canvasCtx.clearRect(0, 0, width, height)
  
  // 绘制坐标轴
  canvasCtx.beginPath()
  canvasCtx.moveTo(50, 50)
  canvasCtx.lineTo(50, height - 50)
  canvasCtx.lineTo(width - 50, height - 50)
  canvasCtx.strokeStyle = '#dcdfe6'
  canvasCtx.stroke()
  
  // 绘制情绪曲线
  const points = props.scenes.map(scene => {
    const emotionValue = {
      'happy': 0.8,
      'sad': 0.2,
      'tense': 0.6,
      'calm': 0.4
    }[scene.emotion] || 0.5
    return emotionValue
  })
  
  if (points.length > 0) {
    canvasCtx.beginPath()
    canvasCtx.moveTo(50, height - 50 - points[0] * (height - 100))
    
    points.forEach((point, index) => {
      const x = 50 + (index / (points.length - 1)) * (width - 100)
      const y = height - 50 - point * (height - 100)
      canvasCtx.lineTo(x, y)
    })
    
    canvasCtx.strokeStyle = '#409EFF'
    canvasCtx.lineWidth = 2
    canvasCtx.stroke()
  }
}

// 监听场景变化，更新情绪曲线
watch(() => props.scenes, () => {
  nextTick(() => {
    drawEmotionCurve()
  })
}, { deep: true })

// 监听窗口大小变化，重绘情绪曲线
const handleResize = () => {
  initEmotionCurve()
}

onMounted(() => {
  initEmotionCurve()
  window.addEventListener('resize', handleResize)
})
</script>

<style scoped>
.emotion-curve {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.emotion-curve h3 {
  margin: 0 0 16px 0;
}

.curve-container {
  position: relative;
  height: 300px;
  background: #f5f7fa;
  border-radius: 4px;
  overflow: hidden;
}

.curve-container canvas {
  width: 100%;
  height: 100%;
}
</style> 